<template>
    <div>
        <ul>
            <!-- 双向绑定 -->
            <li v-for="(item2,index2) in list" :key='index2'>
              {{item2.name}} - {{ item2.price }} - {{ index2 }}
            </li>
            <button v-on:click='addItem'>addItem</button>
            <!-- 标签属性绑定 v-bind:  简写 ：-->
            <a class="link-href" v-bind:href="link" :title="hello" :class="classStr" :style="linkCss">
              to baidu
            </a><br/>
            <!-- 条件渲染 -->
            <a v-if="isPartA">partA</a><br/>
            <!-- <a v-show="!isPartA">partB</a> -->
            <button v-on:click='toggle'>toggle</button>
            <div v-if="Math.random() > 0.5">
              Now you see me
            </div>
            <div v-else>
              Now you don't
            </div>
          </ul>
    </div>
</template>
<script>
import componentA from './components/a'
import Vue from 'vue'
export default {
  components: {
    componentA: componentA
  },
  data () {
    return {
      hello: 'niubi',
      link: 'http://www.baidu.com',
      classStr: 'red-font',
      isPartA: true,
      linkCss: {
        'font-size': '20px',
        'color': 'red'
      },
      list: [
        {
          name: 'apple',
          price: 34
        },
        {
          name: 'banana',
          price: 56
        }
      ],
      objList: {
        name: 'apple',
        price: 34,
        color: 'red',
        weight: 14
      }
    }
  },
  methods: {
    addItem () {
      // 给列表店家数据
      // this.list.push({name: 'hehe', price: 256})
      // 修改第二项数组
      Vue.set(this.list, 1, {
        name: 'hehe',
        price: 256
      })
    },
    toggle () {
      this.isPartA = ! this.isPartA
    }
  }
}
</script>
